<template>
  <div class="issue-container">
    <h1 class="issue-title">新闻动态</h1>
    <h3 class="issue-stitle">了解新闻动态，追踪科技前沿</h3>
    <div class="issue-content">
      <ul>
        <li
          v-for="item in issueData"
          :key="item.id"
          @mouseover="wapp = item.name"
          @mouseenter="$refs.mypho.change()"
          :class="{ current: wapp == item.name }"
        >
          <a href="#">
            <div class="issue-app">
              <img :src="item.src" alt />
              <span>{{ item.title }}</span>
              <svg width="16" height="16" fill="none" class="active">
                <path fill="#000" d="M0 7h16v2H0z" />
                <path fill="#000" d="M9 0v16H7V0z" />
              </svg>
            </div>
            <p>{{ item.describe }}</p>
          </a>
        </li>
      </ul>
      <div class="phone">
        <Phone :stage="wapp" ref="mypho" />
      </div>
    </div>
  </div>
</template>

<script>
import Phone from "./Phone";
export default {
  name: "News",
  data() {
    return {
      wapp: "news01",
      issueData: [
        {
          id: 1,
          name: "news01",
          title: "罗全明教授获教育基金",
          describe: "罗全明教授获得研究生优秀教育工作者称号",
          src: require("../../assets/HomeResource/icon_31llnjdqsqs/yuzhouxingqiu-12.png"),
        },
        {
          id: 2,
          name: "news02",
          title: "电气学院年终总结顺利举办",
          describe:
            "电气工程学院如期举办年终总结大会，大会总结了电气学院一年以来的发展",
          src: require("../../assets/HomeResource/icon_31llnjdqsqs/yuzhouxingqiu-16.png"),
        },
        {
          id: 3,
          name: "news03",
          title: "我院又一个国家级科研基地",
          describe:
            "2020年12月29日，国家科技部公布了69个国家野外科技观测研究站择优建设名单，重庆大学电气工程学院雪峰山能源设备安全野外科学观测站位列其中",
          src: require("../../assets/HomeResource/icon_31llnjdqsqs/yuzhouxingqiu-14.png"),
        },
        {
          id: 4,
          name: "news04",
          title: "服务学生、引导学生、陪班学生",
          describe: "罗全明教授对学生的教育倾注心血，获得了....",
          src: require("../../assets/HomeResource/icon_31llnjdqsqs/hangkonghangtian-aerospace-yuzhou-yinhe.png"),
        },
      ],
    };
  },
  components: {
    Phone,
  },
  methods: {},
};
</script>

<style lang="scss" scope>
.issue-container {
  width: 100%;
  height: 100vh;
  padding-top: 5vh;
  text-align: center;
  box-sizing: border-box;
    // background-color: rgba(231, 52, 231, 0.76);
  .issue-title {
    color: #222;
    font-size: 36px;
    font-weight: 600;
    text-align: center;
  }
  .issue-stitle {
    font-size: 16px;
    color: #666;
    font-weight: 200;
    text-align: center;
  }
  .issue-content {
    width: 1115px;
    min-width: 1115px;
    height: 700px;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    ul {
      width: 522px;
      // height: 600px;
      //   background-color: chocolate;
      margin-top: 79px;
      li {
        list-style: none;
        border-top: 1px solid #ececec;
        padding: 40px 0;
        a{ text-decoration:none;}
        a:hover{ text-decoration:none;}
        }
      li.current p {
        height: 90px;
        visibility: visible;
        opacity: 1;
      }
      li.current .active {
        transform: rotateZ(45deg);
      }
      .issue-app {
        position: relative;
        img {
          width: 55px;
          height: 55px;
          position: absolute;
          left: 0;
          top:-20px;
        }
        span {
          color: rgb(0, 0, 0);
          position: absolute;
          left: 65px;
          top: 0px;
          font-size: 20px;
        }
        .active {
          position: absolute;
          left: 466px;
          top: 18px;
          font-size: 20px;
          transition: transform 0.6s ease;
        }
      }
      p {
        text-align: left;
        position: relative;
        top: 25px;
        color: #666;
        margin: 10px 110px 0 60px;
        line-height: 25px;
        visibility: hidden;
        height: 0;
        opacity: 0;
        transition: all 0.3s ease;
      }
    }
  }
  .phone {
    position: absolute;
    left: 680px;
    top: -170px;
  }
}
</style>
